<template>
    <div class="app-container">
      <el-form label-width="120px" :model="exams" :rules="formRules" ref="dataForm">
        <el-form-item label="学期" prop="semesterId">
          <el-select v-model="exams.semesterId" filterable clearable placeholder="请选择">
            <el-option
                v-for="sOption in semesterOptions"
                :key="sOption.id"
                :label="sOption.name"
                :value="sOption.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 考试课程数据 -->
        <el-form-item label="考试课程" prop="courseId">
            <el-select v-model="exams.courseId" filterable clearable placeholder="请选择">
                <el-option
                    v-for="cOption in courseOptions"
                    :key="cOption.id"
                    :label="cOption.name"
                    :value="cOption.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="考试日期" prop="examDate">
            <el-date-picker
            v-model="exams.examDate"
            type="date"
            placeholder="请选择考试日期"
            />
        </el-form-item>
        <el-form-item label="备注">
            <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请输入考试备注"
                v-model="exams.comment">
            </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="saveBtnDisabled"
            type="primary"
            @click="saveOrUpdate">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
  <script>
  import moment from 'moment';
  import courses from '@/api/cms/courses'
  import semesters from '@/api/cms/semesters'
  import exams from '@/api/cms/exams'
  export default {
    data() {
      return {
        // 存放班级信息
        exams: {
            courseId: '',
            semesterId: '',
            comment: '',
            examDate: null
        },
        saveBtnDisabled: false, // 保存按钮是否禁用
        semesterOptions: undefined,
        courseOptions: undefined,
        formRules: {
            examDate: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            semesterId: [
                { required: true, message: '请输入学期信息', trigger: 'blur' }
            ],
            courseId: [
                { required: true, message: '请输入考试课程', trigger: 'blur' }
            ]
        }
      }
    },
    watch: {
      $route(to, from) { // 监听路由变化方式
        this.init()
      }
    },
    created() {
      this.init();
      // 获取学期数据
      this.getSemesterOption();
      // 获取课程数据
      this.getCourseOption();
    },
    methods: {
      init() {
        // 判断是否有id
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id
          this.getInfo(id)
        } else {
            // 做添加 清空表单
            this.exams =  {
                courseId: '',
                semesterId: '',
                comment: '',
                examDate: null
            }
        }
      },
      // 获取学期数据
      getSemesterOption() {
        semesters.findAllSemesters().then(res=>{
          console.log(res)
          this.semesterOptions = res.data.content
        }).catch(err=>{
          console.log(err)
        })
      },
      // 获取课程数据
      getCourseOption() {
        courses.findAllCourse().then(res=>{
          console.log(res)
          this.courseOptions = res.data.content
        }).catch(err=>{
          console.log(err)
        })
      },
      handleChange(value) {      
        console.log(value)
        this.exams.subjectsId = value[1];
      },
      // 根据id查询方法
      getInfo(id) {
        console.log("********")
        exams.getInfoById(id)
          .then(response => {
            console.log(response);
            this.exams = response.data.item
          })
      },
      saveOrUpdate() {
        this.$refs.dataForm.validate(valid => {
            // console.log(valid)
            if (valid) {
                // console.log('通过')
            // 表单验证通过，执行提交操作
            this.saveBtnDisabled = true
            this.exams.examDate = moment(this.exams.examDate).format('YYYY-MM-DD')
            // 判断saveBtnDisabled是否有id 修改或添加
                if (!this.exams.id) {
                // 添加
                this.saveData()
                } else {
                this.updateData()
                }
            } else {
            // 表单验证失败，输出错误信息
            // console.log('不通过')
                this.$message.error('请正确输入表单');
            }
        })
      },
      // 修改方法
      updateData() {
        exams.updateInfo(this.exams)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.$router.push({ path: '/exams/table' })
          }).catch(response => {
            this.$message({
              type: 'error',
              message: '修改失败'
            })
          })
      },
      // 保存
      saveData() {
        // console.log(this.exams)
        // console.log(this.exams.examDate)
        // debugger;
        exams.addInfo(this.exams)
          .then(response => { // 添加成功
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            // 路由跳转
            this.$router.push({ path: '/exams/table' })
          }).catch(response => {
            this.$message({
              type: 'error',
              message: '保存失败'
            })
          })
      }
    }
  }
  </script>
  